<template>
  <div id="app">
    <router-view></router-view>
    <div class="nav">
      <router-link to="/home">
        <div class="img">
          <img src="./assets/home1.png" alt="">
          <img src="./assets/home2.png" alt="">
        </div>
        <p>主页</p>
      </router-link>
      <router-link to="/gift">
        <div class="img">
          <img src="./assets/gift1.png" alt="">
          <img src="./assets/gift2.png" alt="">
        </div>
        <p>会员杂锦</p>
      </router-link>
      <router-link to="/class">
        <div class="img">
          <img src="./assets/class1.png" alt="">
          <img src="./assets/class2.png" alt="">
        </div>
        <p>分类</p>
      </router-link>
      <router-link to="/shopcar">
        <div class="img">
          <img src="./assets/shopcar1.png" alt="">
          <img src="./assets/shopcar2.png" alt="">
        </div>
        <p>购物车</p>
      </router-link>
      <router-link to="/my">
        <div class="img">
          <img src="./assets/my1.png" alt="">
          <img src="./assets/my2.png" alt="">
        </div>
        <p>我的</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
*{margin:0;padding: 0;}
body{font-size: 12px;}
.nav{position: fixed;bottom: 0;width: 100%;padding:.05rem 0;background: #fff;}
.nav>a{width:20%;display: block;float: left;text-align: center;text-decoration: none;font-size: .14rem;color:#808080;}
.nav>.router-link-active{color: #f39713;}
/*.nav .img img{width: .21rem;}*/
.nav .img p{color:#808080;}
.nav .img img:nth-child(2){display: none;}
.nav>.router-link-active img:nth-child(1){display: none;}
.nav>.router-link-active img:nth-child(2){display: inline;}
</style>
